<!DOCTYPE html>
<html lang="zh">
<head>
    <:include file="./common/title.html" websiteName="订单付款 - ${website.websiteName}" keywords="${website.keywords}" description="${website.description}" favicon="${website.favicon}" shop="${shop}"/>
    <link rel="stylesheet" href="${ctxPath}/default/css/pay.css"/>
    <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class="page-no-scroll">
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- header -->
<:include file="./common/header.html" websiteName="${website.websiteName}" websiteLogo="${website.websiteLogo}"/>
<div class="layui-container body-card">
    <div class="top-text">
        <div class="top-text-tips">订单提交成功，请尽快完成付款！</div>
        <div class="top-text-main">商品说明：${goodsName!}</div>
        <div class="top-text-price">
            应付金额<span class="goods-money">${price!}</span>元
        </div>
    </div>
    <div class="pay-card">
        <div class="pay-header">
            <div class="ew-container" style="text-align: center; padding: 20px;">
                <:if test="${type==1}">
                    <div class="wxpay-logo"></div>
                </:if>
                <:if test="${type==2}">
                    <div class="alipay-logo"></div>
                </:if>
            </div>
        </div>
        <div class="pay-card-body">
            <div class="qrcode-group">
                <div class="qrcode-body" id="orderbody">
                    <div id="payQrCode" style="width: 260px;height: 260px;"></div>
                    <:if test="${type==2}">
                        <img src="https://t.alipayobjects.com/tfscom/T1Z5XfXdxmXXXXXXXX.png"/>
                    </:if>
                    <:if test="${type==1}">
                        <img src=""/>
                    </:if>
                </div>
                <div class="amount" id="timeOut" style="font-size: 20px;color: red;display: none;"><p>
                    订单已过期，请您返回网站重新发起支付</p><br></div>

                <div class="qrcode-desc">
                    <img src="https://storage.360buyimg.com/payment-assets/pc/icon/icon-red.png"/>
                    <div>请使用
                        <:if test="${type==1}">
                            微信
                        </:if>
                        <:if test="${type==2}">
                            支付宝
                        </:if>
                        扫一扫<br>扫描二维码支付
                    </div>
                </div>
            </div>
        </div>
        <div class="pay-card-footer">
            <a href="/saearch/order/${ordersMember!}" class="pay-card-right-btn ew-disable">等待支付（60s）</a>
        </div>
    </div>
</div>
<!-- footer -->
<:include file="./common/footer.html" websiteName="${website.websiteName}" beianIcp="${website.beianIcp}" shop="${shop}"/>
<!-- js部分 -->
<:include file="./common/js.html"/>
<script>
    layui.config({
        base: '${ctxPath}/default/module/'
    }).use(['layer', 'QRCode', 'notice'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var QRCode = layui.QRCode;
        var notice = layui.notice;

        // 生成二维码
        new QRCode(document.getElementById('payQrCode'), {
            text: ${result},
            width: 260,
            height: 260,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });

        // 支付倒计时
        var syTime = 60;
        var timer = setInterval(function () {
            syTime--;
            if (syTime <= 45) {
                $('.pay-card-right-btn').text('已完成支付 >');
                $('.pay-card-right-btn').removeClass('ew-disable');
                clearInterval(timer);
            } else {
                $('.pay-card-right-btn').text('等待支付（' + syTime + 's）');
            }
        }, 1000);

        // 获取订单状态
        setInterval(function () {
            $.get('/order/state/${orderId!}', function (res) {
                if (res.code == 200 && res.data == 1) {
                    notice.msg("支付成功", {icon: 1});
                    setInterval(function () {
                        location.href = '/search/order/${ordersMember!}';
                    }, 1000);
                }
            }, 'json');
        }, 1500);

        /**
         * 判断是否是支付宝，如果是则使用
         */
        <:if test="${type==2}">
            // 判断是否是移动设备
            var device = layui.device();
            if (device.android || device.ios) {
                layer.confirm('是否打开支付宝APP支付？', {
                    title: '温馨提示',
                    shade: .1
                }, function () {
                    window.open(${result!});
                });
            }
        </:if>
    });
</script>
</body>
</html>